<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <div class="img_outer">
      <van-image width="200" height="200" :src="employee_auth_image">
        <template v-slot:loading>
          <van-icon name="qr-invalid" size="5rem" />
        </template>
      </van-image>
    </div>
    <h4 style="font-size: 18px; text-align: center; margin: 5px">授权期限</h4>
    <van-form @submit="onSubmit">
      <van-field
        readonly
        name="begin_date"
        :value="begin_date"
        label="开始时间"
        placeholder="点击选择日期"
        :rules="[{ required: true, message: '请选择日期' }]"
      />
      <van-field
        readonly
        clickable
        name="end_date"
        :value="end_date"
        label="结束时间"
        placeholder="点击选择日期"
        @click="onDateClick('end_date')"
        :rules="[{ required: true, message: '请选择日期' }]"
      />

      <div style="margin: 24px">
        <van-button round block type="info" native-type="submit"
          >确认授权</van-button
        >
      </div>
    </van-form>
    <van-notice-bar
      left-icon="volume-o"
      text="点击【确认授权】按钮, 生成授权二维码, 员工扫码后,获取赠送积分授权"
    />
    <van-calendar
      v-model="showCalendar"
      @confirm="onConfirm"
      :min-date="minDate"
      :max-date="maxDate"
    />
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import { Base64 } from "js-base64";
import NavBar from "@/components/NavBar";
import { formatDateTime, getCurrentDate } from "@/utils/datetime";
import { show_qrcode } from "@/api/wechat";

export default {
  name: "EmployeeAuth",
  components: {
    NavBar,
  },
  computed: {
    maxDate() {
      let datetime = new Date();
      datetime = datetime.setFullYear(datetime.getFullYear() + 5);
      return new Date(datetime);
    },
  },
  props: ["retailer_id"],
  data() {
    return {
      title: this.$route.meta.title,
      employee_auth_image: null,
      flag: "",
      minDate: new Date(),

      showCalendar: false,
      begin_date: getCurrentDate(),
      end_date: null,
    };
  },
  mounted() {},
  methods: {
    onSubmit(values) {
      values["retailer_id"] = this.retailer_id;
      this.getQrCode(values);
    },
    onDateClick(flag) {
      this.flag = flag;
      this.showCalendar = true;
    },
    onConfirm(date) {
      console.log(date);
      if (this.flag == "start_date") {
        this.begin_date = formatDateTime(date, "YYYY-MM-DD");
      } else {
        this.end_date = formatDateTime(date, "YYYY-MM-DD");
      }

      this.showCalendar = false;
    },
    getQrCode(values) {
      const pid = localStorage.getItem("openid");
      const base64_pid = Base64.encode(pid);
      const url = `http://${window.location.host}/#/retailer/${values["retailer_id"]}/auth_info?begin_date=${values["begin_date"]}&end_date=${values["end_date"]}&pid=${base64_pid}`;
      const params = {
        url: url,
      };
      show_qrcode(params)
        .then((res) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.employee_auth_image = data;
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
</style>